﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link href="css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.9.1.js"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/component.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <!-- 头部 -->
    <head-template></head-template>
    <!-- nav -->
    <div class="nav" style="position:relative;">
        <ul class="nav-list cw1200 clearfix">
            <li><a href="index.html">首页</a></li>
            <li v-for="(item,index) in themeList"><a :href="'index.html?type='+item.id"
                                                     :class="{on:typeActive ==item.id}">{{item.themename}}</a></li>
        </ul>
    </div>
    <!-- 内容 -->
    <div class="sy_main clearfix">
        <div class="sy_list_detailBox fl">
            <h2>{{textData.title}}</h2>
            <!--            <div class="detail_downloadBtn">-->
            <!--                <div class="downloadBtn1">-->
            <!--                    <span>浏览量：46</span>-->
            <!--                    <span>下载量：20</span>-->
            <!--                    <a href="javascript:void()">收藏</a>-->
            <!--                    <a href="javascript:void()">下载</a>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="sy_list_detailCon">
                <div v-html="textData.content"></div>
            </div>
            <div class="sy_originaltext"><a :href="textData.url" target="_blank">原文链接</a></div>

        </div>
        <div class="sy_linklist fr">
            <div class="sy_linklist_title">相关推荐</div>
            <div class="ifour_txt">
                <div v-for="item in relatedList">
                    <div class="ifour_txt_left">
                        <i class="icon_topItem"></i>
                        <a :href="'detail.html?id='+item.urlid+'&type='+item.type">{{item.title}}</a>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
</div>
</body>
<script type="text/javascript">
    let id = location.href.split("?")[1].split("&")[0].split("=")[1];
    let type = location.href.split("?")[1].split("&")[1].split("=")[1];
    let topType = type.split(".")[0] + ".";

    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            typeActive: topType,
            relatedNum: 5,
            queryData: {
                pageNo: 1,
                pageNum: 5
            },
            textData: {},
            themeList: [],
            relatedList: []
        },
        methods: {
            initData() {
                axios.get("/data/text/" + id).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.textData = result;
                    }
                });
                axios.get("/data/firstTheme").then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.themeList = result;
                    }
                });
                axios.get("/data/text/" + id + "/related?num=" + this.relatedNum).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.relatedList = result;
                    }
                })
            },
        },
        mounted: function () {
            this.$nextTick(() => {
                this.initData();
            });
        }
    })
</script>
</html>